<template>
    <n-card title="存储状态" size="small" id="vc_diskStatus">
        <template #header-extra>
            <div style="position: absolute">
                <div style="position: relative; right: -0.375rem; top: calc(-0.875rem - 2px)">
                    <div
                        style="
                            width: 1.25rem;
                            height: 1.25rem;
                            background-color: hsla(174, 100%, 33%, 0.5);
                            transform: translateX(-50%);
                            clip-path: polygon(100% 0, 100% 100%, 0 0);
                            border-radius: 0.25rem;
                        "></div>
                </div>
            </div>
        </template>
        <div class="card-body" style="gap: 1rem">
            <section style="flex: 1; align-items: flex-start">
                <div class="performace-item disk" style="width: 100%">
                    <n-scrollbar style="max-height: max-content">
                        <div class="disk-item-container">
                            <div class="disk-item" v-for="item in disk_items">
                                <div class="icon">
                                    <svg
                                        v-if="item.type == 'SSD'"
                                        width="16"
                                        height="16"
                                        class="bi bi-device-ssd"
                                        viewBox="0 0 16 16">
                                        <path
                                            d="M4.75 4a.75.75 0 0 0-.75.75v3.5c0 .414.336.75.75.75h6.5a.75.75 0 0 0 .75-.75v-3.5a.75.75 0 0 0-.75-.75zM5 8V5h6v3zm0-5.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m7 0a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0M4.5 11a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1m7 0a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1" />
                                        <path
                                            d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm11 12V2a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1v-2a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2a1 1 0 0 0 1-1m-7.25 1v-2H5v2zm1.75 0v-2h-.75v2zm1.75 0v-2H8.5v2zM11 13h-.75v2H11z" />
                                    </svg>
                                    <svg
                                        v-else
                                        width="16"
                                        height="16"
                                        class="bi bi-device-hdd"
                                        viewBox="0 0 16 16">
                                        <path
                                            d="M12 2.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m0 11a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m-7.5.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1M5 2.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0M8 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2" />
                                        <path
                                            d="M12 7a4 4 0 0 1-3.937 4c-.537.813-1.02 1.515-1.181 1.677a1.102 1.102 0 0 1-1.56-1.559c.1-.098.396-.314.795-.588A4 4 0 0 1 8 3a4 4 0 0 1 4 4m-1 0a3 3 0 1 0-3.891 2.865c.667-.44 1.396-.91 1.955-1.268.224-.144.483.115.34.34l-.62.96A3 3 0 0 0 11 7" />
                                        <path
                                            d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z" />
                                    </svg>
                                </div>
                                <div class="text">
                                    <div style="display: flex; justify-content: space-between">
                                        <n-space style="gap: 0 3px">
                                            <n-tag
                                                size="small"
                                                class="d-phone-none"
                                                type="primary"
                                                round>
                                                {{ item.type }}
                                            </n-tag>
                                            <n-tag size="small">{{ item.device }}</n-tag>
                                            <n-tag size="small" class="d-phone-none">
                                                {{ item.model }}
                                            </n-tag>
                                            <n-tag size="small" class="d-phone-none">
                                                <span
                                                    v-if="item.SMART.attributes?._temperature || 0 < 50">
                                                    {{ item.SMART.attributes?._temperature || '?' }}℃
                                                </span>
                                                <span
                                                    class="tw-text-orange"
                                                    v-else-if="
                                                        item.SMART.attributes?._temperature || 0 >= 50
                                                    ">
                                                    {{ item.SMART.attributes?._temperature || '?' }}℃
                                                </span>
                                                <span
                                                    class="tw-text-orange"
                                                    v-else-if="
                                                        item.SMART.attributes?._temperature || 0 > 60
                                                    ">
                                                    {{ item.SMART.attributes?._temperature || '?' }}℃
                                                </span>
                                            </n-tag>
                                        </n-space>
                                        <section>
                                            <p>
                                                {{ computed_size(item.used, item.size) }}
                                            </p>
                                            <p style="white-space: nowrap; display: inline-flex">
                                                <span v-if="item.SMART.smart_available">
                                                    <span
                                                        v-if="
                                                            item.SMART.attributes?._health?.toUpperCase() ===
                                                                'PASSED' ||
                                                            item.SMART.attributes?._health?.toUpperCase() ===
                                                                'GOOD'
                                                        "
                                                        class="smart tw-text-green">
                                                        健康
                                                        <n-icon><CheckCircleOutlineFilled /></n-icon>
                                                    </span>
                                                    <span
                                                        v-else-if="
                                                            item.SMART.attributes?._health?.toUpperCase() ==
                                                                'CAUTION' ||
                                                            item.SMART.attributes?._health?.toUpperCase() ==
                                                                'WARNING'
                                                        "
                                                        class="smart tw-text-orange">
                                                        警告
                                                        <n-icon><WarningAmberFilled /></n-icon>
                                                    </span>
                                                    <span
                                                        v-else-if="
                                                            ['FAILED', 'BAD'].includes(
                                                                item.SMART.attributes?._health?.toUpperCase() ||
                                                                    ''
                                                            )
                                                        "
                                                        class="smart tw-text-red">
                                                        严重
                                                        <n-icon><DangerousOutlined /></n-icon>
                                                    </span>
                                                    <span v-else class="smart">
                                                        {{ item.SMART.attributes?._health }}
                                                    </span>
                                                </span>
                                                <span class="smart" v-else>
                                                    <span class="text">未知</span>
                                                    <n-icon><InfoOutlined /></n-icon>
                                                </span>
                                                <span class="smart d-phone-none">
                                                    {{
                                                        item.SMART.attributes?.power_on_hours?.value ||
                                                        item.SMART.attributes?.Power_On_Hours?.value
                                                    }}小时
                                                </span>
                                                <span
                                                    class="smart button"
                                                    @click="compControl.smart_checker.handleShow(item)">
                                                    查看SMART
                                                </span>
                                            </p>
                                        </section>
                                    </div>
                                    <div>
                                        <n-progress
                                            style="margin-top: 1px"
                                            type="line"
                                            :percentage="
                                                parseFloat(((item.used / item.size) * 100).toFixed(2))
                                            "
                                            indicator-placement="inside" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </n-scrollbar>
                </div>
            </section>
        </div>
    </n-card>
    <n-modal v-model:show="compControl.smart_checker.status">
        <n-card
            title="查看SMART"
            style="width: min-content; max-width: 700px"
            role="dialog"
            aria-modal="true">
            <template #header-extra>
                <n-icon
                    style="cursor: pointer"
                    size="18"
                    @click="compControl.smart_checker.status = false">
                    <CloseFilled />
                </n-icon>
            </template>
            <div>
                <p style="text-align: center; font-weight: bold; padding-bottom: 0.5rem">
                    {{ compControl.smart_checker.dev_name }}
                </p>
                <table class="smart-table" border style="border-collapse: collapse; width: 100%">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>键</th>
                            <th>介绍</th>
                            <th>值 (十进制)</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="k in Object.keys(compControl.smart_checker.data)">
                            <td>{{ compControl.smart_checker.data[k]['id'] }}</td>
                            <td>{{ k }}&ensp;</td>
                            <td>{{ compControl.smart_checker.data[k]['text'] }}&ensp;</td>
                            <td>
                                {{
                                    compControl.smart_checker.data[k]['value'] ||
                                    compControl.smart_checker.data[k]
                                }}&ensp;
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <template #footer>
                <div style="width: 0; height: 0; overflow: hidden">
                    <button>占位的</button>
                </div>
            </template>
        </n-card>
    </n-modal>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import {
    CheckCircleOutlineFilled,
    CloseFilled,
    InfoOutlined,
    WarningAmberFilled,
    DangerousOutlined
} from '@vicons/material'
import axiosInstance from '@/utils/network/axios'
import type { AxiosResponse } from 'axios'
import type { DiskItem } from '@/utils/interface/DiskItem'
const compControl = reactive({
    smart_checker: {
        status: false,
        dev_name: '',
        data: null as any,
        handleShow(data: DiskItem) {
            compControl.smart_checker.status = true
            compControl.smart_checker.data = data.SMART.attributes || {}
            compControl.smart_checker.dev_name = `${data.model} (${Math.ceil(
                (data.size * 1024) / 1000
            )}GB)`
        }
    }
})
const computed_size = computed(() => {
    return (u: number, t: number) => {
        if (t < 1024) {
            return `${u.toFixed(2)}GiB / ${t.toFixed(2)} GiB`
        } else if (t < 4096) {
            return `${u.toFixed(0)}GiB / ${t.toFixed(0)} GiB`
        } else {
            return `${(u / 1024).toFixed(2)}TiB / ${(t / 1024).toFixed(2)} TiB`
        }
    }
})

const disk_items = ref<Array<DiskItem>>([])
function handleGetDiskInfo() {
    axiosInstance.get('/home/dashboard/disk-info').then((response: AxiosResponse) => {
        disk_items.value = response.data
    })
}
onMounted(() => {
    handleGetDiskInfo()
})
</script>

<style lang="scss" scoped>
@use '@/assets/style/sea-viewport';
#vc_diskStatus {
    //min-width: 300px;

    @media (min-width: sea-viewport.$phone_min) {
        // max-width: var(--max_width_3items);
    }
}
:deep(.n-card-header) {
    padding-bottom: 0;
}
.card-body {
    display: flex;
    flex-wrap: wrap;
    section {
        display: flex;
        align-items: center;
    }
}

.performace-item {
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    width: min-content;
    p text {
        position: absolute;
        font-size: 1.125rem;
        top: -1.75rem;
        text-align: center;
        width: 100%;
    }
}

.disk-item-container {
    //height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    .disk-item {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        &:not(:first-child) {
            margin-top: 0.5rem;
        }
        .icon {
            display: flex;
            align-items: center;

            svg {
                width: 2rem;
                height: 100%;
                margin-right: 0.25rem;
            }
        }
        .text {
            display: flex;
            flex-direction: column;
            flex: 1;
            .smart {
                display: flex;
                align-items: center;
                white-space: nowrap;
            }

            .smart {
                margin-left: 0.5rem;
                &.button {
                    color: rgb(16, 16, 77);
                    cursor: pointer;
                    &:hover {
                        color: orange;
                    }
                }
                .text {
                    width: 1.75rem;
                    text-align: right;
                }
                &.ok {
                    color: green;
                }
                &.warning {
                    color: orange;
                }
                &.danger {
                    color: red;
                    font-weight: bold;
                }
            }
        }
    }
}
.smart-table {
    th,
    td {
        padding: 0 0.25rem;
        white-space: nowrap;
    }
}
</style>
